<template>
	<view class="container">
		<!-- 商品的标题区域 -->
		<view class="cart-title">
			<!-- left icon -->
			<uni-icons type="shop" size='18'></uni-icons>
			<!-- right text -->
			<text class="cart-title-text" @click="log">购物车</text>
		</view>

		<!-- 商品主题组件 -->
		<u-swipe-action :show="showIndex == index" @open="open" @click="swipeActionClickHandler" btn-width='150'
			:options="options" :index="index" v-for="(item,index) in cart" :key="index">
			<cart-card :cartData="item" @onProductsItemTap='onProductsItemTap' @num-change="numberChangeHandler"
				@radio-change="radioChangeHandler">
			</cart-card>
			<u-line border-style="dashed" color="black"></u-line>
		</u-swipe-action>

		<!-- <u-gap height="150" bg-color="#ffffff"></u-gap> -->
		<u-empty margin-top="150" v-if="cart.length == 0" text="购物车为空" mode="car"></u-empty>

		<!-- 结算区域 -->
		<view class="footer-account-box all-accounts-box">
			<!-- 全选区域 -->
			<view class="all-select" @click="changeAllState">
				<u-image v-if="isFullCheck" width="48" height="48" :show-loading="false"
					src="/static/icon/all@selected.png">
					<!-- <u-loading slot="loading"></u-loading> -->
				</u-image>
				<u-image v-else width="48" height="48" :show-loading="false" src="/static/icon/all.png">
					<!-- <u-loading slot="loading"></u-loading> -->
				</u-image>
				<text>全选({{checkedCount}})</text>
			</view>
			<!-- 合计，结算区域 -->
			<view class="all-price-submit" @click="settlement">
				<view class="accounts-btn">下单</view>
				<view class="price-text">￥{{checkedGoodsAmount}}</view>
				<view class="arrow-icon">
					<u-image v-if="checkedGoodsAmount==0" width="32" height="32" :show-loading='false'
						src="/static/icon/arrow@grey.png">
						<!-- <u-loading slot="loading"></u-loading> -->
					</u-image>
					<u-image v-else width="32" height="32" :show-loading="false" src="/static/icon/arrow.png">
						<!-- <u-loading slot="loading"></u-loading> -->
					</u-image>
				</view>
			</view>
		</view>
		<!-- <view class="no-data">您还没有添加任何商品</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import badgeMix from '@/mixins/tabbar-badge.js';
	export default {
		mixins: [badgeMix],
		data() {
			return {
				showIndex: null,
				showEmpty: false,
				// 倒计时的秒数
				seconds: 3,
				// 定时器的 Id
				timer: null,
				options: [{
						text: '收藏',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
			// addstr 是详细的收货地址
			...mapGetters('m_user', ['addstr']),
			// token 是用户登录成功之后的 token 字符串
			...mapState('m_user', ['token']),
			// 是否全选
			isFullCheck() {
				// 对比商品总数量和勾选商品总数量
				return this.total === this.checkedCount
			},
		},
		methods: {
			...mapMutations('m_cart', ['updateGoodsState', 'updateAllGoodsState', 'updateGoodsCount',
				'updateSwipeActionShow',
				'removeGoodsById',
				'updateRedirectInfo'
			]),
			// 未登录跳转this丢失
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
			log() {
				console.log(this.cart);
			},
			radioChangeHandler(event) {
				// 输出得到的数据 -> {id: 395, selectStatus: false}
				// console.log(event);
				let {
					goods_id,
					goods_state
				} = event
				this.updateGoodsState(event)
			},
			numberChangeHandler(event) {
				console.log(event);
				let {
					goods_id,
					goods_count
				} = event
				this.updateGoodsCount(event)

			},
			swipeActionClickHandler(index, options) {
				// console.log(index,options,id);
				if (options == 1) {
					console.log(index);
					this.removeGoodsById(index)
					this.$refs.uToast.show({
						title: '删除成功',
						type: 'success',
					})
				} else {
					// this.list[index].show = false;
					// this.$u.toast(`收藏成功`);
				}
			},
			open(index) {
				this.showIndex = index;
			},
			// 修改购物车中所有商品的选中状态
			changeAllState() {
				// !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
				this.updateAllGoodsState(!this.isFullCheck)
			},
			// 下单按钮，跳转下单页面
			settlement(event) {
				// 1. 先判断是否勾选了要结算的商品
				if (!this.checkedCount) return uni.showToast({
					title: '请选择要结算的商品！',
					duration: 1500,
					icon: 'none'
				})

				// 2. 再判断用户是否选择了收货地址
				// if (!this.addstr) return uni.$showMsg('请选择收货地址！')

				// 3. 最后判断用户是否登录了
				// if (!this.token) return this.delayNavigate()
				if (!this.token) return this.delayNavigate()

				uni.navigateTo({
					// todo
					url: '../order/order?account='
				})
			},
			// 延迟导航到 my 页面
			delayNavigate() {
				// 把 data 中的秒数重置成 3 秒
				this.seconds = 3
				// 1. 展示提示消息，此时 seconds 的值等于 3
				this.showTips(this.seconds)

				// 2. 创建定时器，每隔 1 秒执行一次
				// 1. 将定时器的 Id 存储到 timer 中
				this.timer = setInterval(() => {
					// 2.1 先让秒数自减 1
					this.seconds--
					// 2. 判断秒数是否 <= 0
					if (this.seconds <= 0) {
						// 2.1 清除定时器
						clearInterval(this.timer)

						// 2.2 跳转到 my 页面
						uni.switchTab({
							url: '/pages/my/my',

							// 页面跳转成功之后的回调函数
							success: () => {
								// 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
								this.updateRedirectInfo({
									// 跳转的方式
									openType: 'switchTab',
									// 从哪个页面跳转过去的
									from: '/pages/cart/cart'
								})
							}
						})

						// 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
						return
					}
					// 2.2 再根据最新的秒数，进行消息提示
					this.showTips(this.seconds)
				}, 1000)
			},
			// 展示倒计时的提示消息
			showTips(n) {
				this.$refs.uToast.show({
					title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页',
					url: '/pages/my/my',
					params: {
						isTab: true,
						icon: false
					}
				})
			},
			onProductsItemTap(id) {
				uni.navigateTo({
					url: "/page_roduct_detail/product/product?id=" + id
				})
			},
		},
		watch: {

		}
	}
</script>

<style lang="scss">
	.container {

		.cart-title {
			height: 40px;
			display: flex;
			align-items: center;
			padding-left: 5px;
			border-bottom: 1px solid #efefef;

			.cart-title-text {
				font-size: 14px;
				margin-left: 10px;
			}
		}

		.all-accounts-box {
			background-color: #AB956D;
			color: #fff;

			.all-accounts-box>view {
				display: flex;
				align-items: center;
			}
		}
	}

	.footer-account-box {
		position: fixed;
		bottom: var(--window-bottom);
		height: 92rpx;
		width: 100%;
		display: flex;
		border-top: 1rpx solid #ccc;
		border-bottom: 1rpx solid #ccc;
	}

	.all-accounts-box {
		background-color: #AB956D;
		color: #fff;

		&>view {
			display: flex;
			align-items: center;
		}

		.all-select {
			font-size: 28rpx;
			width: 40%;

			&:nth-child(1) {
				margin: 0 20rpx;
			}
		}

		.all-price-submit {
			width: 60%;

			.accounts-btn,
			.price-text,
			.arrow-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 32rpx;
			}

			.accounts-btn {
				width: 50%;
				font-size: 28rpx;
				border-right: 3rpx dotted #fff;
			}

			.price-text {
				width: 20%;
				font-size: 28rpx;
				margin-left: 10rpx;

			}

			.arrow-icon {
				width: 30%;
			}
		}
	}
</style>
